<template>
  <div class="flow-setting" v-loading="pageLoading">
    <el-container>
      <el-main class="flow-el-main">
        <el-container class="el-custom-table-container">
          <el-header class="flow-el-header">
            <div class="flow-el-controller">
              <el-row class="flow-body-header-row">
                <el-button-group>
                  <el-button
                    icon="el-icon-lx-back"
                    @click="
                      this.$store.commit('closeCurrentPage', this.$route.fullPath);
                      this.$router.push({
                        path: '/flowlist',
                      });
                    "
                    size="small"
                    type="danger"
                    >{{ $t("table.Global_Back") }}</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-edit-outline"
                    @click="dbFlowclick(this.$refs.superFlow.graph)"
                    :disabled="flowproperty.status === 0"
                    >{{ this.$t("flowi18n.flow_property") }}</el-button
                  >
                  <el-button
                    v-if="1 == 0"
                    size="small"
                    type="primary"
                    icon="el-icon-plus"
                    :disabled="!flowproperty.parallelTask"
                    @click="AddNode('branch', $t('flowi18n.flow_step_branch'), 50, 50)"
                    >{{ this.$t("flowi18n.flow_step_branch") }}</el-button
                  >
                  <el-button
                    v-if="1 == 0"
                    size="small"
                    type="primary"
                    icon="el-icon-lx-emoji"
                    :disabled="flowproperty.status === 0"
                    @click="AddNode('start', $t('flowi18n.flow_step_start'), 50, 50)"
                    >{{ this.$t("flowi18n.flow_step_start") }}</el-button
                  >
                  <el-button
                    v-if="1 == 0"
                    type="primary"
                    size="small"
                    icon="el-icon-lx-friend"
                    :disabled="flowproperty.status === 0"
                    @click="AddNode('approval', $t('flowi18n.flow_step_approval'))"
                    >{{ this.$t("flowi18n.flow_step_approval") }}</el-button
                  >
                  <el-button
                    v-if="1 == 0"
                    type="warning"
                    size="small"
                    icon="el-icon-chat-dot-round"
                    :disabled="flowproperty.status === 0"
                    @click="AddNode('cc', $t('flowi18n.flow_step_circulate'))"
                    >{{ this.$t("flowi18n.flow_step_circulate") }}</el-button
                  >
                  <el-button
                    type="info"
                    v-if="1 == 0"
                    size="small"
                    icon="el-icon-lx-timefill"
                    :disabled="flowproperty.status === 0"
                    @click="AddNode('end', $t('flowi18n.flow_step_end'), 50, 50)"
                    >{{ this.$t("flowi18n.flow_step_end") }}</el-button
                  >
                  <el-button
                    type="success"
                    size="small"
                    icon="el-icon-finished"
                    :disabled="flowproperty.status === 0"
                    @click="flowSave"
                    >{{ this.$t("flowi18n.flow_save") }}</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-download"
                    @click="Publish"
                    :disabled="flowproperty.status === 0"
                    >{{ this.$t("flowi18n.flow_install") }}</el-button
                  >
                  <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    @click="UnInstall"
                    :disabled="
                      flowproperty.status === 0 ||
                      flowproperty.status === 1 ||
                      flowproperty.status === 2
                    "
                    >{{ this.$t("flowi18n.flow_uninstall") }}</el-button
                  >
                </el-button-group>
              </el-row>
            </div>
          </el-header>
          <el-container class="flow-body-left-el-container" :style="quickStyle">
            <el-aside style="width: 200px">
              <div class="flow-body-left-quick-el-controller" :style="quick_item_Style">
                <div class="crumbs" style="padding-left: 20px">
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                      <i class="el-icon-lx-picfill"></i>
                      {{ this.$t("flowi18n.flow_quickly_menu") }}
                    </el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
                <el-divider class="el-body-left-divider--horizontal"></el-divider>
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-lx-emoji"
                    class="el-body-left-button"
                    propType="start"
                    :propName="$t('flowi18n.flow_step_start')"
                    :disabled="flowproperty.status === 0"
                    @mousedown.left="nodeMousedown"
                    >{{ this.$t("flowi18n.flow_step_start") }}</el-button
                  >
                </div>
                <div>
                  <el-button
                    icon="el-icon-plus"
                    type="primary"
                    class="el-body-left-button"
                    propType="branch"
                    :propName="$t('flowi18n.flow_step_branch')"
                    v-if="flowproperty.parallelTask"
                    @mousedown.left="nodeMousedown"
                    >{{ this.$t("flowi18n.flow_step_branch") }}</el-button
                  >
                </div>
                <div>
                  <el-button
                    icon="el-icon-plus"
                    type="danger"
                    class="el-body-left-button"
                    propType="endbranch"
                    :propName="$t('flowi18n.flow_step_branch')"
                    v-if="flowproperty.parallelTask"
                    @mousedown.left="nodeMousedown"
                    >{{ this.$t("flowi18n.flow_step_branch") }}</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-lx-friend"
                    class="el-body-left-button"
                    propType="approval"
                    :propName="$t('flowi18n.flow_step_approval')"
                    :disabled="flowproperty.status === 0"
                    @mousedown.left="nodeMousedown"
                    >{{ this.$t("flowi18n.flow_step_approval") }}</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="warning"
                    icon="el-icon-lx-comment"
                    class="el-body-left-button"
                    propType="cc"
                    :propName="$t('flowi18n.flow_step_circulate')"
                    :disabled="flowproperty.status === 0"
                    @mousedown.left="nodeMousedown"
                    >{{ this.$t("flowi18n.flow_step_circulate") }}</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-video-play"
                    class="el-body-left-button"
                    propType="branch"
                    :disabled="flowproperty.status === 0"
                    :propName="$t('flowi18n.flow_step_branch')"
                    @mousedown.left="nodeMousedown"
                    >{{ this.$t("flowi18n.flow_step_branch") }}</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="danger"
                    icon="el-icon-video-pause"
                    class="el-body-left-button"
                    propType="endbranch"
                    :propName="'并行-结束'"
                    :disabled="flowproperty.status === 0"
                    @mousedown.left="nodeMousedown"
                    >{{ this.$t("flowi18n.flow_step_branch") }}</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-close"
                    class="el-body-left-button"
                    propType="condition"
                    :propName="$t('flowi18n.flow_step_condition')"
                    :disabled="flowproperty.status === 0"
                    @mousedown.left="nodeMousedown"
                    >{{ this.$t("flowi18n.flow_step_condition") }}</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="info"
                    icon="el-icon-lx-timefill"
                    class="el-body-left-button"
                    propType="end"
                    :propName="$t('flowi18n.flow_step_end')"
                    :disabled="flowproperty.status === 0"
                    @mousedown.left="nodeMousedown"
                    >{{ this.$t("flowi18n.flow_step_end") }}</el-button
                  >
                </div>
              </div>
            </el-aside>
            <el-main class="flow-body-right-el-main">
              <div class="flow-body-right-el-container" :style="quick_item_Style">
                <el-scrollbar>
                  <div class="super-flow-base-demo">
                    <super-flow
                      ref="superFlow"
                      @dbflowclick="dbFlowclick"
                      @dbnodeclick="dbNodeClick"
                      @dblineclick="dbLineclick"
                    ></super-flow>
                  </div>
                </el-scrollbar>
              </div>
            </el-main>
          </el-container>
        </el-container>
      </el-main>
    </el-container>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showflowpropertydrawer"
      direction="rtl"
      size="50%"
      :before-close="handleClose"
    >
      <flow-property-component-vue
        v-if="showflowpropertydrawer"
        ref="flow-property"
        @FlowPropetryEvent="FlowPropetryEvent"
      ></flow-property-component-vue>
    </el-drawer>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="shownodepropertydrawer"
      direction="rtl"
      size="50%"
      :before-close="handleClose"
    >
      <flow-node-component-vue
        v-if="shownodepropertydrawer"
        ref="flow-node"
        :stepproperty="stepproperty"
        :oldproperty="oldNode"
        :bindproperty="bindNode"
        :formversionid="flowproperty.form[0].currentVersionId"
        :flowversionid="flowproperty.versionId"
        @FlowNodePropetryEvent="FlowNodePropetryEvent"
        :isAutoSelect="isAutoSelect"
        :isSkipNode="isSkipNode"
        :isParallel="isParallel"
        :branchs="branchs"
        :lines="branchLines"
      ></flow-node-component-vue>
    </el-drawer>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showlinepropertydrawer"
      direction="rtl"
      size="56%"
      :before-close="handleClose"
    >
      <flow-line-component-vue
        v-if="showlinepropertydrawer"
        ref="flow-line"
        :lineproperty="lineproperty"
        :oldproperty="oldline"
        :bindproperty="bindline"
        :formversionid="flowproperty.form[0].currentVersionId"
        :flowversionid="flowproperty.versionId"
        @FlowLinePropetryEvent="FlowLinePropetryEvent"
      ></flow-line-component-vue>
    </el-drawer>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showEndNodePropertydrawer"
      direction="rtl"
      size="50%"
      :before-close="handleClose"
    >
      <flow-completed-node-component-vue
        v-if="
          showEndNodePropertydrawer &&
          flowproperty.meta.prop != 'branch' &&
          flowproperty.meta.prop != 'endbranch'
        "
        ref="flow-end-node"
        :endFields="endFields"
        :formversionid="flowproperty.form[0].currentVersionId"
        :flowversionid="flowproperty.versionId"
        @EndNodeEvent="EndNodeEvent"
      ></flow-completed-node-component-vue>
    </el-drawer>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showbranchpropertydrawer"
      direction="rtl"
      size="30%"
      :before-close="handleClose"
    >
      <flow-branch-componet
        v-if="showbranchpropertydrawer"
        ref="flow-branch"
        :stepproperty="stepproperty"
        :oldproperty="oldNode"
        :bindproperty="bindNode"
        @FlowNodePropetryEvent="FlowNodePropetryEvent"
        :branchs="branchs"
        :lines="branchLines"
      ></flow-branch-componet>
    </el-drawer>
  </div>
</template>
<script>
//import reqVue from "../../utils/req.vue";
import { getOffset } from "../../../packages/utils";
import FlowNodeComponentVue from "../../components/FlowNodeComponent.vue";
import FlowPropertyComponentVue from "../../components/FlowPropertyComponent.vue";
import reqVue from "../../utils/req.vue";
import confVue from "../../utils/conf.vue";
import FlowLineComponentVue from "../../components/FlowLineComponent.vue";
import FlowCompletedNodeComponentVue from "../../components/FlowCompletedNodeComponent.vue";
import FlowBranchComponet from "../../components/FlowBranchComponet.vue";

let windowHeight = parseInt(window.innerHeight);
export default {
  components: {
    FlowPropertyComponentVue,
    FlowNodeComponentVue,
    FlowLineComponentVue,
    FlowCompletedNodeComponentVue,
    FlowBranchComponet,
  },
  data() {
    return {
      pageLoading: true,
      autoHeight: {},
      outHeight: {
        height: "",
      },
      quickStyle: {
        height: "",
      },
      quick_item_Style: {
        height: "",
      },
      ///节点集合
      nodeList: [],
      branchLines: [],
      ///连线集合
      linkList: [],
      ///流程属性
      flowproperty: {},
      ///节点属性
      stepproperty: {},
      showflowpropertydrawer: false, ///弹出流程属性编辑框
      flownewproperty: {},
      shownodepropertydrawer: false, ///弹出流程节点属性编辑框
      apipath: "flowinfo",
      way: confVue.$flowApi,
      oldNode: {},
      bindNode: {},
      isAutoSelect: false,
      lineproperty: {},
      oldline: {},
      bindline: {},
      showlinepropertydrawer: false,
      isSkipNode: false,
      isParallel: false,
      showEndNodePropertydrawer: false,
      endFields: [],
      showbranchpropertydrawer: false,
      branchs: [],
    };
  },
  created() {
    setTimeout(() => {
      this.InitFlow();
    }, 100);
  },
  methods: {
    ///加载流程属性
    InitFlow() {
      let url = this.apipath + "/v1.0/get/" + this.$route.query.flowid;
      reqVue.$Post(null, url, this.way).then(
        function (data) {
          if (data.status) {
            this.$nextTick(function () {
              this.$refs.superFlow.graph.flowproperty = data.body.flowProperty;
              this.$refs.superFlow.nodeList = data.body.nodeList;
              this.$refs.superFlow.linkList = data.body.linkList;
            });
            this.flowproperty = data.body.flowProperty;
            this.pageLoading = false;
            this.branchLines = data.body.linkList;
          } else {
            this.$message.error(data.message);
            this.pageLoading = false;
          }
        }.bind(this)
      );
      this.nodeList = [];
      this.linkList = [];
    },
    getHeight() {
      this.outHeight.height = windowHeight - 127 + "px";
      this.autoHeight.height = windowHeight - 144 + "px";
      this.quickStyle.height = windowHeight - 144 + "px";
      this.quick_item_Style.height = windowHeight - 147 + "px";
    },
    ///添加节点
    AddNode(prop, name, width, height) {
      this.$refs.superFlow.installNode(prop, name, width, height);
    },
    ///拖拽方法
    nodeMousedown(btn) {
      let prop = btn.currentTarget.getAttribute("proptype");
      let propName = btn.currentTarget.getAttribute("propname");
      let width = 160;
      let height = 80;
      document.onmouseup = (e) => {
        //鼠标弹起来的时候不再移动
        if (e.toElement.className === "super-flow") {
          let position = getOffset(e, this.$el);
          if (prop == "start" || prop == "end") {
            position[0] = position[0] - 865;
            if (position[0] < -640) {
              position[0] = -640;
            }
            position[1] = position[1] - 555;
            if (position[1] < -430) {
              position[1] = -430;
            }
            width = 50;
            height = 50;
          } else {
            if (position[0] < -585) {
              position[0] = -585;
            }
            position[0] = position[0] - 920;
            if (position[0] < -640) {
              position[0] = -640;
            }
            position[1] = position[1] - 535;
            if (position[1] < -410) {
              position[1] = -410;
            }
          }
          if (prop == "branch" || prop == "condition" || prop == "endbranch") {
            width = 60;
            height = 60;
          }
          this.$refs.superFlow.installDragNode(prop, propName, width, height, position);
          e.toElement.setAttribute("style", "width: 1796px;height: 824px;");
        }
        document.onmousemove = null;
        //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
        document.onmouseup = null;
      };
      document.onmousemove = (e) => {
        if (e.toElement.className === "super-flow") {
          e.toElement.setAttribute("style", "width: 1796px;height: 824px;cursor: move;");
        }
      };
    },
    flowSave() {
      console.log(JSON.stringify(this.$refs.superFlow.graph));
      this.$confirm(this.$t("i18n.confirm_save"), this.$t("i18n.confirm"), {
        type: "warning",
      }).then(() => {
        this.pageLoading = true;
        reqVue
          .$Post(this.$refs.superFlow.graph, this.apipath + "/v1.0/save", this.way)
          .then(
            function (data) {
              if (data.status) {
                this.$message.success(data.message);
                setTimeout(() => {
                  this.pageLoading = false;
                  this.$store.commit("closeCurrentPage", this.$route.fullPath);
                  this.$router.push({
                    path: "/flowlist",
                  });
                }, 1000);
              } else {
                this.pageLoading = false;
                this.$message.error(data.message);
              }
            }.bind(this)
          );
      });
    }, ///发布表单数据
    Publish() {
      const graphs = this.$refs.superFlow.graph;
      if (graphs.nodeList.filter((o) => o.meta.prop == "start").length <= 0) {
        this.$message.error("请配置开始节点");
        return;
      }
      if (graphs.nodeList.filter((o) => o.meta.prop == "end").length <= 0) {
        this.$message.error("请配置结束节点");
        return;
      }
      ///判断分支是否成对出现
      const branch = graphs.nodeList.filter((o) => o.meta.prop == "branch");
      const endBranch = graphs.nodeList.filter((o) => o.meta.prop == "endbranch");
      if (branch.length > 0 && endBranch.length == 0) {
        this.$message.error("所有分支均未配置结束分支!");
        return;
      } else if (branch.length == 0 && endBranch.length > 0) {
        this.$message.error("所有结束分支均未配置开始分支!");
        return;
      } else if (branch.length > 0 && endBranch.length > 0) {
        const lens = branch.filter(
          (b) => !endBranch.filter((o) => o.meta.endBranch == b.meta.stepId)
        );
        if (lens > 0) {
          lens.forEach((element) => {
            this.$message.error(`${element.meta.cnName}未配置配置结束分支!`);
            return;
          });
        }
      }
      this.$confirm(this.$t("i18n.confirm_Publish_Flow"), this.$t("i18n.confirm"), {
        type: "warning",
      }).then(() => {
        this.pageLoading = true;
        reqVue
          .$Post(this.$refs.superFlow.graph, this.apipath + "/v1.0/publish", this.way)
          .then(
            function (data) {
              if (data.status) {
                this.$message.success(data.message);
                setTimeout(() => {
                  this.pageLoading = false;
                  this.$store.commit("closeCurrentPage", this.$route.fullPath);
                  this.$router.push({
                    path: "/flowlist",
                  });
                }, 1000);
              } else {
                this.pageLoading = false;
                this.$message.error(data.message);
              }
            }.bind(this)
          );
      });
    },
    UnInstall() {
      this.$confirm(this.$t("i18n.confirm_unloaded"), this.$t("i18n.confirm"), {
        type: "warning",
      }).then(() => {
        this.pageLoading = true;
        reqVue
          .$Post(
            null,
            this.apipath + "/v1.0/uninstall/" + +this.$route.query.flowid,
            this.way
          )
          .then(
            function (data) {
              if (data.status) {
                this.$message.success(data.message);
                setTimeout(() => {
                  this.pageLoading = false;
                  this.$store.commit("closeCurrentPage", this.$route.fullPath);
                  this.$router.push({
                    path: "/flowlist",
                  });
                }, 1000);
              } else {
                this.pageLoading = false;
                this.$message.error(data.message);
              }
            }.bind(this)
          );
      });
    },
    ///打开流程属性
    dbFlowclick(graph) {
      this.showflowpropertydrawer = true;
      this.$nextTick(function () {
        this.settingFlwoProperty(
          this.$refs["flow-property"].flowproperty,
          graph.flowproperty
        );
      });
    },
    handleClose() {},
    FlowPropetryEvent(flowproperty) {
      if (flowproperty != null && flowproperty != undefined) {
        this.$refs.superFlow.graph.flowproperty = flowproperty;
      }
      this.showflowpropertydrawer = false;
      this.flowproperty.parallelTask = flowproperty.parallelTask;
    },
    FlowNodePropetryEvent() {
      this.shownodepropertydrawer = false;
      this.showbranchpropertydrawer = false;
    },
    FlowLinePropetryEvent() {
      this.showlinepropertydrawer = false;
    },
    ///打卡节点属性
    dbNodeClick(node) {
      this.branchs = [];
      this.$refs.superFlow.graph.nodeList
        .filter((o) => o.meta.prop == "branch")
        .forEach((o) => {
          this.branchs.push({
            label: o.meta.cnName,
            value: o.meta.stepId,
            tag: o.meta.branchTag,
            line: o.meta.line,
          });
        });
      if (
        node.meta.prop === "start" ||
        node.meta.prop === "cc" ||
        node.meta.prop === "approval"
      ) {
        this.isSkipNode = this.$refs.superFlow.graph.flowproperty.skipRules > 0;
        this.isParallel = this.$refs.superFlow.graph.flowproperty.parallelTask;
        this.shownodepropertydrawer = true;
        this.oldNode = this.settingNodeProperty(node);
        this.bindNode = this.settingNodeProperty(node);
        this.stepproperty = node;
        ///判断上一个节点是自动节点还是手动选择分支节点
        const lines = this.$refs.superFlow.graph.linkList.filter(
          (o) => o.end.id == node.id
        );
        this.isAutoSelect = false;
        if (lines.length > 0) {
          let nodes = this.$refs.superFlow.graph.nodeList;
          for (let index = 0; index < lines.length; index++) {
            const element = lines[index];
            let node = nodes.filter((o) => o.id == element.start.id);
            if (node.length > 0) {
              if (node[0].meta.prop == "condition") {
                const lins = this.$refs.superFlow.graph.linkList.filter(
                  (o) => o.end.id == node[0].id
                );
                if (lins.length > 0) {
                  const et = lins[0];
                  let nd = nodes.filter((o) => o.id == et.start.id);
                  if (nd[0].strategy.isAutoSelectStep) {
                    this.isAutoSelect = true;
                    break;
                  }
                }
              } else if (
                node[0].meta.prop == "endbranch" ||
                node[0].meta.prop == "branch"
              ) {
                this.isAutoSelect = true;
                break;
              } else if (node[0].strategy.isAutoSelectStep) {
                this.isAutoSelect = true;
                break;
              }
            }
          }
        }
      } else if (node.meta.prop === "branch" || node.meta.prop === "endbranch") {
        this.showbranchpropertydrawer = true;
        this.oldNode = this.settingNodeProperty(node);
        this.bindNode = this.settingNodeProperty(node);
        this.stepproperty = node;
      }
    },
    ///初始化属性数据
    settingFlwoProperty(newproperty, oldproperty) {
      newproperty.flowId = oldproperty.flowId;
      newproperty.cnName = oldproperty.cnName;
      newproperty.enName = oldproperty.enName;
      newproperty.type = oldproperty.type == null ? 0 : oldproperty.type;
      newproperty.flowIcon = oldproperty.flowIcon;
      newproperty.flowStyle = oldproperty.flowStyle;
      newproperty.formId = oldproperty.formId;
      newproperty.form = oldproperty.form;
      newproperty.currentVersion = oldproperty.currentVersion;
      newproperty.instanceManager = oldproperty.instanceManager;
      newproperty.instanceManagers = oldproperty.instanceManagers;
      newproperty.manager = oldproperty.manager;
      newproperty.managers = oldproperty.managers;
      newproperty.note = oldproperty.note;
      newproperty.placeholder = oldproperty.placeholder;
      newproperty.recycled = oldproperty.recycled == null ? false : oldproperty.recycled;
      newproperty.selectApplyEmp =
        oldproperty.selectApplyEmp == null ? false : oldproperty.selectApplyEmp;
      newproperty.sendMessage =
        oldproperty.sendMessage == null ? false : oldproperty.sendMessage;
      newproperty.skipRules = oldproperty.skipRules == null ? 0 : oldproperty.skipRules;
      newproperty.view_Instance =
        oldproperty.view_Instance == null ? false : oldproperty.view_Instance;
      newproperty.status = oldproperty.status == null ? 0 : oldproperty.status;
      newproperty.versionId = oldproperty.versionId;
      newproperty.versionName = oldproperty.versionName;
      newproperty.versionNo = oldproperty.versionNo;
      newproperty.parallelTask =
        oldproperty.parallelTask == null ? false : oldproperty.parallelTask;
      newproperty.sumbitPrevStep =
        oldproperty.sumbitPrevStep == null ? false : oldproperty.sumbitPrevStep;
    },
    ///初始化节点属性
    settingNodeProperty(oldproperty) {
      return {
        id: oldproperty.id,
        key: oldproperty.key,
        width: oldproperty.width == undefined ? 160 : oldproperty.width,
        height: oldproperty.height == undefined ? 80 : oldproperty.height,
        coordinate: oldproperty.coordinate,
        meta: {
          stepId:
            oldproperty.meta.stepId == "" ? oldproperty.id : oldproperty.meta.stepId, ///节点ID
          versionId: oldproperty.meta.versionId, ///流程版本ID
          prop: oldproperty.meta.prop, ///节点类型
          width: oldproperty.meta.width == undefined ? 160 : oldproperty.meta.width, ///宽度
          height: oldproperty.meta.height == undefined ? 80 : oldproperty.meta.height, ///导读
          coordinate: oldproperty.meta.coordinate, ///坐标
          desc: oldproperty.meta.desc, ///说明
          cnName: oldproperty.meta.cnName, ///中文名
          enName: oldproperty.meta.enName, ///英文名
          showQuickField: oldproperty.meta.showQuickField, ///快捷字段显示
          showHistory: oldproperty.meta.showHistory, ///显示历史
          opinion: oldproperty.meta.opinion, ///意见
          backOpinion: oldproperty.meta.backOpinion, ///退回意见
          endOpinion: oldproperty.meta.endOpinion, ///终止意见
          showOpinion: oldproperty.meta.showOpinion, ///显示意见
          required: oldproperty.meta.required, ///意见必填
          handlerMessage: oldproperty.meta.handlerMessage, ///处理人接收提醒
          ccMessage: oldproperty.meta.ccMessage, ///抄送人接收提醒
          note: oldproperty.meta.note, ///备注
          groups: oldproperty.meta.groups,
          backScale: oldproperty.meta.backScale,
          approvalScale: oldproperty.meta.approvalScale,
          backStrategy: oldproperty.meta.backStrategy + "",
          branchStrategy: oldproperty.meta.branchStrategy + "",
          endScale: oldproperty.meta.endScale,
          endStrategy: oldproperty.meta.endStrategy + "",
          startGroup: oldproperty.meta.startGroup,
          branchTag: oldproperty.meta == null ? "" : oldproperty.meta.branchTag,
          line: oldproperty.meta == null ? "" : oldproperty.meta.line,
        },
        btns: oldproperty.btns,
        form: oldproperty.form,
        strategy: {
          stepId:
            oldproperty.strategy.stepId == ""
              ? oldproperty.id
              : oldproperty.strategy.stepId, ///节点id
          isAutoSelectStep: oldproperty.strategy.isAutoSelectStep,
          approvalStrategy: oldproperty.strategy.approvalStrategy, //多人审批策略
          skipStrategy: oldproperty.strategy.skipStrategy, ///跳过策略
          strategyType: oldproperty.strategy.strategyType, ///策略类型
          approveParttimePostion: oldproperty.strategy.approveParttimePostion, ///审批人兼职策略
          sendParttimePostion: oldproperty.strategy.sendParttimePostion, ///发送人兼职策略
          approverType: oldproperty.strategy.approverType, ///处理者类型
          formField: oldproperty.strategy.formField, ///表单字段
          formFieldApproveType: oldproperty.strategy.formFieldApproveType, ///表单字段处理者类型
          appoverRange: oldproperty.strategy.appoverRange, ///表单字段处理者类型
          defaultApprover: oldproperty.strategy.defaultApprover, ///默认处理人
          orgLeve: oldproperty.strategy.orgLeve, ///部门负责人层级
          ccStrategyType: oldproperty.strategy.ccStrategyType, ///抄送策略类型
          ccApproveParttimePostion: oldproperty.strategy.ccApproveParttimePostion, ///抄送人兼职设置
          ccSendParttimePostion: oldproperty.strategy.ccSendParttimePostion, ///抄送人兼职2
          ccType: oldproperty.strategy.ccType, ///抄送人类型
          ccFormFieldApproveType: oldproperty.strategy.ccFormFieldApproveType, ////抄送表单字段处理者类型F
          ccFormField: oldproperty.strategy.ccFormField, ///抄送表单字段
          ccUser: oldproperty.strategy.ccUser, ////默认抄送人
          ccOrgLeve: oldproperty.strategy.ccOrgLeve, ///抄送组织层级
          nodeApprovalScale: oldproperty.strategy.nodeApprovalScale, ///审批比例
          nodeBackScale: oldproperty.strategy.nodeBackScale, ///审批比例
          nodeBackStrategy: oldproperty.strategy.nodeBackStrategy, ///退回策略
          nodeEndScale: oldproperty.strategy.nodeEndScale, ///审批比例
          nodeEndStrategy: oldproperty.strategy.nodeEndStrategy, ///终止回策略
        },
        complateds: [],
      };
    },
    ///打开连线属性
    dbLineclick(line) {
      console.log(JSON.stringify(line));
      this.showlinepropertydrawer = true;
      this.oldline = this.settingLineProperty(line);
      this.bindline = this.settingLineProperty(line);
      this.lineproperty = line;
    },
    ///初始化连线属性
    settingLineProperty(oldproperty) {
      return {
        id: oldproperty.id,
        startId: oldproperty.startId,
        endId: oldproperty.endId,
        startAt: oldproperty.startAt,
        endAt: oldproperty.endAt,
        meta: {
          linkId:
            oldproperty.meta == null || oldproperty.meta.linkId == ""
              ? oldproperty.id
              : oldproperty.meta.linkId, ///连线ID
          versionId: oldproperty.meta == null ? "" : oldproperty.meta.versionId, ///流程版本ID
          cnName: oldproperty.meta == null ? "" : oldproperty.meta.cnName, ///中文名
          enName: oldproperty.meta == null ? "" : oldproperty.meta.enName, ///英文名
          businessCondition:
            oldproperty.meta == null ||
            oldproperty.meta.businessCondition == null ||
            oldproperty.meta.businessCondition == ""
              ? []
              : JSON.parse(oldproperty.meta.businessCondition), ///业务字段
          personCondtion:
            oldproperty.meta == null ||
            oldproperty.meta.personCondtion == null ||
            oldproperty.meta.personCondtion == ""
              ? []
              : JSON.parse(oldproperty.meta.personCondtion), ///人员字段
          orgCondtion:
            oldproperty.meta == null ||
            oldproperty.meta.orgCondtion == null ||
            oldproperty.meta.orgCondtion == ""
              ? []
              : JSON.parse(oldproperty.meta.orgCondtion), ///部门字段
          postionCondtion:
            oldproperty.meta == null ||
            oldproperty.meta.postionCondtion == null ||
            oldproperty.meta.postionCondtion == ""
              ? []
              : JSON.parse(oldproperty.meta.postionCondtion), ///职位字段
          sequence: oldproperty.meta == null ? 0 : oldproperty.meta.sequence, ///排序
          branchTag: oldproperty.meta == null ? "" : oldproperty.meta.branchTag,
        },
      };
    },
    EndNodeEvent(res) {
      if (res != null && res.length > 0) {
        this.$refs.superFlow.graph.complateds = res;
        this.endFields = res;
      }
      this.showEndNodePropertydrawer = false;
    },
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
};
</script>
